<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雷达图</title>
    <style>
      body {
        background-color: #37393e;
      }
      .chart-container {
        text-align: center;
      }
      #radar-chart {
        width: 260px;
        height:260px;
        margin: auto;
        background-color: #37393e;
      }
    </style>
</head>

<body>
    <div class="chart-container">
        <div id="radar-chart"></div>
    </div>
    <script src="js/echarts.min.js" charset="utf-8"></script>
    <script>
        document.addEventListener('message', function(e) {
            console.log('--------html---------');
            var data = e.data.split(',');
            // alert(JSON.stringify(data));
            if(window.myChart) {
              window.myChart.dispose()
            }
            var tempData =  data.slice(1);
            var max = getMaxNum(tempData);
            initRadar({compact:Number(data[1]),physiotherapy:Number(data[2]),reduce:Number(data[3]),max:max>1?max:1});
            // initRadar();
        });

        function initRadar(options) {
            // 基于准备好的dom，初始化echarts实例
            var self = this;
            window.myChart = echarts.init(document.getElementById('radar-chart'));
            // 指定图表的配置项和数据
            var option = {
                radar: {
                    shape: 'circle',
                    name: {
                        textStyle: {
                            // color: '#333333',
                            // fontSize:15
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['#37393e', '#37393e', '#37393e', '#37393e'],
                            shadowColor: 'rgba(0, 100, 0, 0.3)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#636569'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#636569',
                        }
                    },
                    indicator: [{
                        name: '减肥:'+options.reduce+'(H)',
                        color:'#ffffff',
                        max:options.max,
                    }, {
                        name: '理疗:\n'+options.physiotherapy+'(H)',
                        color:'#ffffff',
                        max:options.max
                    }, {
                        name: '紧致:\n'+options.compact+'(H)',
                        color:'#ffffff',
                        max:options.max
                    }]
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: [options.reduce, options.physiotherapy, options.compact],
                        name: '数据',
                        symbolSize:8,
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ba9866',
                                lineStyle: '#ba9866',
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: "#ba9866",
                                width: 5
                            }
                        },
                        areaStyle: {
                            normal: {
                                // color: '#0580f2',
                                color: '#ba9866',
                                opacity: 1,
                                // shadowColor:'rgba(0, 0, 0, 0.8)',
                                // shadowOffsetX:1,
                            }
                        }
                    }]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            window.myChart.setOption(option);
        }

        function getMaxNum(array) {
          for (var i = 0; i < array.length; i++) {
            array[i] = Number(array[i])
          }
          var max = array[0];
          for (var j = 0; j < array.length; j++) {
            if(array[j] > max) {
              max = array[j]
            }
          }
          return max;
        }
    </script>
</body>

</html>
